<template>
  <footer class="bg-white rounded-lg shadow dark:bg-gray-800">
    <div class="w-full mx-auto max-w-screen-2xl p-5 md:flex md:items-center md:justify-between">

      <div class="flex dark:text-gray-400">
        <svg-icon class="mr-1" iconName="icon-haoping"></svg-icon>
        <span>本站居然运行了
            <strong>{{ days }}</strong> 天
            <strong>{{ hours }}</strong> 时
            <strong>{{ minute }}</strong> 分
            <strong>{{ second }}</strong> 秒
        </span>
      </div>
      
      <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
        <li>
          备案号：<a href="http://beian.miit.gov.cn/" class="hover:underline me-4 md:me-6 hand-style">闽ICP备2024051765号-1</a>
        </li>
      </ul>

      <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2024 <a href="https://www.ymblog.top/"
          class="hover:underline hand-style">码海航行</a>. All Rights Reserved.
      </span>

    </div>
  </footer>
</template>
<script setup>
import { ref } from 'vue'

// 天
const days = ref('')
// 时
const hours = ref('')
// 分
const minute = ref('')
// 秒
const second = ref('')



function init() {
  let timer = setInterval(() => {
    let timeold = new Date().getTime() - new Date(1709222400000).getTime();
    let msPerDay = 24 * 60 * 60 * 1000;
    let daysold = Math.floor(timeold / msPerDay);
    let day = new Date();
    days.value = daysold;
    hours.value = day.getHours();
    minute.value = day.getMinutes();
    second.value = day.getSeconds();
  }, 1000);
}

init()
</script>
<style scoped>
  strong {
    color: #3a8ee6
  }
</style>